<template>
  <div class="view-blog" id="view-blog-top">
    <mavonEditor
      :value="blog && blog.blogContent"
      :subfield="false"
      defaultOpen="preview"
      :toolbarsFlag="false"
      :shortCut="false"
    />
    <message id="message" :messages="messageList" :blogId="id"></message>
    <!-- <p style="height: 500px;" id="message">sdklfjsldf</p> -->
    <Button
      @click="pageIndex++"
      :disabled="total === messageList.length"
      :loading="loading"
      >查看更多</Button
    >
    <handle class="handle" :id="id" :likeNum="blog && blog.blogUp" :remarkNum="blog && blog.remarkNum" @click-message="clickMessage"></handle>
  </div>
</template>

<script>
import message from "_c/message/message.vue";
import handle from "_c/handle/handle.vue";
import { getBlogMessageById } from "@/api/blog.js";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  name: "view-blog",
  data() {
    return {
      id: this.$route.params.id,
      blog: this.$route.params.blog,
      total: 0,
      pageIndex: 1,
      messageList: [],
      loading: false
    };
  },
  methods: {
    getBlogMessageById() {
      this.loading = true;
      getBlogMessageById({ id: this.id, index: this.pageIndex }).then(res => {
        this.loading = false;
        if (res.status === 200 && res.data.code === 0) {
          const data = res.data.data;
          this.total = data.total;
          this.messageList.push(...data.content);
        }
      });
    },
    clickMessage() {
      this.$router.push({ path: '#message' })
    }
  },
  watch: {
    pageIndex() {
      this.getBlogMessageById();
    }
  },
  components: {
    message,
    mavonEditor,
    handle
  },
  created() {
    this.getBlogMessageById();
  }
};
</script>

<style lang="less" scoped>
.view-blog {
  position: relative;
  .handle {
    position: fixed;
    background: rgba(0, 153, 229, 0.7);
    color: #fff;
    text-align: center;
    border-radius: 2px;
    right: 90px;
    bottom: 50%;
  }
}
</style>
